<template>
  <div class="domOuter">
    <div class="item">
      <a-input v-model:value="inputText" @pressEnter="handleChange"></a-input>
      <div ref="targetFontText" class="threeJsDom"></div>
    </div>
    <div class="item">
      <a-button  type="primary" @click="handleClick">切换图片</a-button>
      <div ref="targetThree" class="threeJsDom"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted,ref } from "vue";
import ThreeJs from "./three"
import TextFont from './textFont'
const inputText = ref('try my best')
const targetThree = ref(null)
const targetFontText = ref(null)
let three:ThreeJs|null = null
let textfont :TextFont|null = null
onMounted(() => {
  three = new ThreeJs(targetThree.value)
  textfont = new TextFont(targetFontText.value,inputText.value)
})
const handleClick = () => {
  three?.removeCube()
  three?.setCube('/src/assets/icons/icon128.png')
}
const handleChange = () => {
  textfont?.refreshText(inputText.value)
}
window.onresize = () => {
  textfont?.resetRenderer()
}
</script>

<style scoped lang='less'>
.domOuter{
  display: flex;
  justify-content: center;
  .item{
    width: 100%;
  }
  .threeJsDom{
    width: 100%;
    height: 500px;
  }
}
</style>